<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <script src="js/vue.js"></script>
        <link rel="stylesheet" type="text/css" href="css/index.css" />
        <script src="js/index.js"></script>
    </head>
    <body>

        <div id="app">
            <el-container>
                <el-header style="text-align: right; font-size: 12px">
                    <el-row :gutter="0" type="flex" class="row-bg" justify="center">
                        <el-col :span="10">
                            <el-form ref="form" :model="form"  :rules="rules" label-width="80px" >
                                <el-form-item prop="todo">
                                    <el-input v-model="form.todo" placeholder="请输入内容" v-on:keyup.enter.native="addTodo">
                                    </el-input>
                                    <el-form-item>
                                        <el-button type="primary" @click="submitForm('form')">立即创建</el-button>
                                      </el-form-item>
                                </el-form-item>
                            </el-form>
                        </el-col>
                        <el-col :span="4">
                            <el-button type="primary" v-on:click="addTodo">添加</el-button>
                        </el-col>
                    </el-row>

                </el-header>
                <el-main>
                    <el-row :gutter="0" type="flex" class="row-bg" justify="center">
                        <el-col :span="14">
                            <el-table :data="todolist" :row-class-name="addClass" @row-click="rowClick">
                                <el-table-column prop="todo" label="任务列表">
                                    <template slot-scope="scope">
                                        <span v-if="scope.row.done">{{scope.row.todo}}(完成)</span>
                                        <span v-else>{{scope.row.todo}}</span>
                                        <span class="close" v-on:click.stop="deleteTodo(scope.$index)">&#x00D7;</span>
                                    </template>
                                </el-table-column>
                            </el-table>
                        </el-col>

                    </el-row>
                </el-main>
            </el-container>
        </div>
    </body>


    <style type="text/css">
        .el-header {
            background-color: #B3C0D1;
            color: #333;
            line-height: 60px;
        }

        .el-aside {
            color: #333;
        }

        .finished {
            background: #BBB;
            text-decoration: line-through;
        }

        .close {
            position: absolute;
            right: 0;
            top: 0;
            padding: 12px 16px 12px 16px
        }

        .close:hover {
            background-color: #f44336;
            color: white;
            cursor: pointer;
        }
    </style>

    <script type="text/javascript">
        var main = new Vue({

                    el: "#app",
                    data: {
                        // todo: "",
                        todolist: [],
                        form: {
                            todo: ""
                        },
                        rules: {
                            todo: [{
                                    required: true,
                                    message: '请输入活动名称',
                                    trigger: 'blur'
                                },
                                {
                                    min: 3,
                                    max: 5,
                                    message: '长度在 3 到 5 个字符',
                                    trigger: 'blur'
                                }
                            ],
                        }
                        },

                        methods: {
                            addTodo: function() {
                                
                                this.todolist.push({
                                    todo: this.form.todo,
                                    done: false
                                });
                                this.todo = "";
                            },
                            rowClick(row) {
                                row.done = !row.done;
                                console.log(row.todo, row.done);

                            },
                            addClass(table) {
                                if (table.row.done) {
                                    return "finished";
                                }
                            },
                            deleteTodo: function(index) {
                                this.todolist.splice(index, 1);
                            },
                            
                             submitForm(formName) {
                                    this.$refs[formName].validate((valid) => {
                                      if (valid) {
                                        this.addTodo();
                                      } else {
                                        console.log('error submit!!');
                                        return false;
                                      }
                                    });
                                  },
                        }

                    });
    </script>

</html>
